<template>
  <div class="app-container">
    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> -->
    <el-form ref="form" :model="form" label-width="240px" :rules="rules">
      <!-- <el-tab-pane label="培训计划" name="first"> -->
      <el-form-item label="培训分类：">
        <el-tree-select v-model="form.plan.train.trainArchiveId" :data="trainArchiveTree" check-strictly
          :render-after-expand="true" default-expand-all placeholder="分类" />
      </el-form-item>
      <!-- <el-form-item label="渠道：">
            <el-select v-model="form.plan.train.offline" clearable>
              <el-option v-for="item in EnumMap.train.offlineEnum" :key="item.key" :value="item.key"
                :label="item.value"></el-option>
            </el-select>
          </el-form-item> -->
      <el-form-item label="培训单位：" prop="plan.train.trainingUnit" required>
        <el-input v-model="form.plan.train.trainingUnit"></el-input>
      </el-form-item>
      <!-- <el-form-item label="地址：" prop="plan.train.trainingUnitAdress">
            <el-input v-model="form.plan.train.trainingUnitAdress"></el-input>
          </el-form-item> -->
      <el-form-item label="培训班名称：" prop="plan.train.name" required>
        <el-input v-model="form.plan.train.name"></el-input>
      </el-form-item>
      <el-form-item label="培训人员类别：" required>
        <tree-select v-model="form.departmentIdList" :data="departmentTree" :clearable="true" placeholder="人员类别"
          style="width: 100%" />
      </el-form-item>
      <!--      <el-form-item label="培训对象：" required>-->
      <!--        <div class="paper-user">-->
      <!--          <el-tag-->
      <!--            v-for="user in form.trainUserList"-->
      <!--            :key="user.id"-->
      <!--            @close="removeUser(user)"-->
      <!--            closable-->
      <!--            >{{ user.realName }} - {{ user.userName }}-->
      <!--          </el-tag>-->
      <!--          <div>-->
      <!--            <el-button-->
      <!--              type="success"-->
      <!--              size="small"-->
      <!--              class="link-left wdd-button-mini"-->
      <!--              @click="userSelectClick"-->
      <!--              >选择员工-->
      <!--            </el-button>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-form-item>-->
      <!-- <el-form-item label="考试范围：" prop="rangeType" required>
        <el-select v-model="form.rangeType" @change="rangeTypeChange" clearable>
          <el-option v-for="item in EnumMap.exam.build.rangeTypeEnum" :key="item.key" :value="item.key"
            :label="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="考试人员类别：" v-if="form.rangeType !== null && form.rangeType === 1">
        <tree-select v-model="form.buildConfig.departmentIdList" :data="departmentTree" :clearable="true"
          placeholder="人员类别" style="width: 100%" />
      </el-form-item>
      <el-form-item label="考试员工：" class="tree-select-contain" v-if="form.rangeType !== null && form.rangeType === 1">
        <div class="paper-user">
          <el-tag size="small" v-for="user in form.buildConfig.examPaperUserSelectList" :key="user.id"
            @close="removeUser(user)" closable>{{ user.realName }} - {{ user.userName }}
          </el-tag>
          <el-button type="success" size="small" class="link-left wdd-button-mini" @click="userSelectClick">
            选择员工
          </el-button>
          <el-upload accept=".xlsx" action="/api/exam/paper/build/employee/import" :show-file-list="false"
            :on-progress="uploadProgress" :on-success="uploadExcelSuccess" :on-error="uploadError"
            class="paper-user-upload">
            <el-button type="success" size="small" class="link-left wdd-button-mini">导入员工</el-button>
          </el-upload>
        </div>
      </el-form-item> -->
      <el-form-item label="培训方式：" required>
        <el-select v-model="form.plan.train.trainingFangshi" clearable>
          <el-option v-for="item in sys_train_type" :key="item.dictValue" :value="item.dictValue"
            :label="item.dictLabel"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="培训类型：" prop="plan.train.trainingType" required>
        <el-input v-model="form.plan.train.trainingType"></el-input>
      </el-form-item>
      <el-form-item label="培训日期：" required>
        <el-date-picker v-model="form.plan.train.startTime" placeholder="选择开始时间" value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime">
        </el-date-picker>
        <el-date-picker v-model="form.plan.train.endTime" placeholder="选择结束时间" value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="培训地点：" prop="plan.train.trainingAdress">
        <el-input v-model="form.plan.train.trainingAdress"></el-input>
      </el-form-item>
      <!-- <el-form-item label="培训时间：" class="form-item-content-block" prop="limitDateTime" required>
        <el-date-picker v-model="form.limitDateTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabled-date="disabledDate">
        </el-date-picker>
       </el-form-item> -->
      <el-form-item label="封面：" prop="coverPath" required>
        <el-upload accept=".jpg,.png" name="file" :data="{ folder: 'train/course' }" action="/api/upload/folder/file"
          :show-file-list="false" :on-progress="uploadProgress" :on-success="uploadImageSuccess"
          :on-error="uploadError">
          <el-image style="width: 350px; height: 200px" :src="form.plan.train.coverPath" fit="fill"></el-image>
        </el-upload>
      </el-form-item>
      <el-form-item label="培训描述：" prop="plan.traindescription">
        <el-input v-model="form.plan.train.description" type="textarea" rows="8"></el-input>
      </el-form-item>
      <el-form-item label="课程列表：" required>
        <el-tabs type="border-card" class="train-tab">
          <el-tab-pane label="课程">
            <div>
              <draggable class="train-course-ware-content" item-key="index" group="courseWareItemList" handle=".drag"
                v-model="form.plan.courseWareItemList">
                <template #item="{ index, element }">
                  <div class="train-course-ware">
                    <div class="train-course-ware-action">
                      <el-button size="small" circle @click="courseWarePreview(element.previewPath)">
                        <el-icon>
                          <icon-view />
                        </el-icon>
                      </el-button>
                    </div>
                    <div class="train-course-ware-content drag">
                      {{ element.name }}
                    </div>
                    <div class="train-course-ware-time">
                      <div>合格时长：</div>
                      <el-input class="train-course-ware-input" placeholder="00:00:00"
                        :formatter="value => `${value}`.replace(/[^\d|:]/g, '')" v-model.trim="element.passNumber"
                        required />
                      <div class="max-number-time">
                        总时长：{{ element.maxNumberStr }}
                      </div>
                    </div>
                    <div class="train-course-ware-action">
                      <el-button type="danger" circle @click="courseWareRemove(index)">
                        <el-icon>
                          <icon-delete />
                        </el-icon>
                      </el-button>
                    </div>
                  </div>
                </template>
              </draggable>
            </div>
            <div>
              <el-button type="primary" @click="addCourseWare">添加课程</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="试卷">
            <div class="train-course-ware" v-if="form.plan.examPaperItem.targetId">
              <div class="train-course-ware-action">
                <el-button size="small" circle @click="examPaperPreview(form.plan.examPaperItem.targetId)">
                  <el-icon>
                    <icon-view />
                  </el-icon>
                </el-button>
              </div>
              <div class="train-course-ware-content">
                {{ form.plan.examPaperItem.name }}
              </div>
              <div class="train-course-ware-time">
                <div class="train-exam-paper-limit">
                  <div class="train-exam-paper-limit-item">
                    <div class="train-exam-paper-limit-item-label">
                      合格分：
                    </div>
                    <el-input-number v-model="form.plan.examPaperItem.passNumber" :precision="1" :step="1"
                      :max="maxPassScore" :min="0.1" required></el-input-number>
                  </div>
                  <div class="train-exam-paper-limit-item" style="margin-top: 5px">
                    <div class="train-exam-paper-limit-item-label">
                      考试次数：
                    </div>
                    <el-input-number v-model="form.plan.examPaperItem.allowCount" :step="1" :max="100" :min="0"
                      required></el-input-number>
                  </div>
                </div>
                <div class="max-number-time">
                  试卷总分：{{ form.plan.examPaperItem.maxNumberStr }}
                </div>
              </div>
              <div class="train-course-ware-action">
                <el-button type="danger" circle @click="examPaperRemove">
                  <el-icon>
                    <icon-delete />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="addExamPaper">选择试卷</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="证书">
            <div class="train-course-ware" v-if="form.plan.credentialItem.targetId">
              <div class="train-course-ware-action">
                <el-button size="small" circle @click="credentialShow(form.plan.credentialItem.targetId)">
                  <el-icon>
                    <icon-view />
                  </el-icon>
                </el-button>
              </div>
              <div class="train-credential-content">
                <el-image style="width: 50px; height: 50px" :src="form.plan.credentialItem.templateImagePath"
                  fit="fill" />
                <div class="train-credential-content-company">
                  {{ form.plan.credentialItem.name }}
                </div>
              </div>
              <div class="train-course-ware-action">
                <el-button type="danger" circle @click="credentialRemove">
                  <el-icon>
                    <icon-delete />
                  </el-icon>
                </el-button>
              </div>
            </div>
            <div>
              <el-button type="primary" @click="addCredential">选择证书</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item label="排序：" prop="train.itemOrder">
        <el-input-number v-model="form.plan.train.itemOrder" :precision="0" :step="1" :min="0"
          :max="9999999"></el-input-number>
      </el-form-item>
      <el-form-item label="班主任：">
        <el-select v-model="form.teacherList[0].teacherId" clearable>
          <el-option v-for="item in teacherList" :key="item.key" :value="item.id" :label="item.name"></el-option>
        </el-select>
      </el-form-item>

      <!--      上传资料-->
      <el-form-item label="资料上传：" required>
        <TabDataUpload ref="tabUploadRef" DictType="train_file_type" v-model:fileList="form.fileList"></TabDataUpload>
        <!--        <el-tabs type="border-card" class="train-tab">-->
        <!--          <el-tab-pane v-for="item in train_file_type" :label="item.dictLabel">-->
        <!--            <el-upload-->
        <!--              name="file"-->
        <!--              :data="{ folder: 'train/course' }"-->
        <!--              action="/api/upload/folder/file"-->
        <!--              :show-file-list="true"-->
        <!--              :on-progress="uploadProgress"-->
        <!--              :on-success="-->
        <!--                (response, file, fileList) => {-->
        <!--                  return uploadSuccess(response, file, fileList, item);-->
        <!--                }-->
        <!--              "-->
        <!--              :on-error="uploadError"-->
        <!--            >-->
        <!--              <el-button-->
        <!--                type="primary"-->
        <!--                size="small"-->
        <!--                class="link-left wdd-button-mini"-->
        <!--                >上传{{ item.dictLabel }}</el-button-->
        <!--              >-->
        <!--            </el-upload>-->

        <!--            &lt;!&ndash;            <el-upload&ndash;&gt;-->
        <!--            &lt;!&ndash;              accept=".jpg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"&ndash;&gt;-->
        <!--            &lt;!&ndash;              name="file"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :data="{ folder: 'train/course/' }"&ndash;&gt;-->
        <!--            &lt;!&ndash;              action="/api/upload/folder/file"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :show-file-list="false"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-progress="uploadProgress"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-success="uploadImageSuccess"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-error="uploadError"&ndash;&gt;-->
        <!--            &lt;!&ndash;            >&ndash;&gt;-->
        <!--            &lt;!&ndash;              <el-image&ndash;&gt;-->
        <!--            &lt;!&ndash;                style="width: 350px; height: 200px"&ndash;&gt;-->
        <!--            &lt;!&ndash;                :src="form.coverPath"&ndash;&gt;-->
        <!--            &lt;!&ndash;                fit="fill"&ndash;&gt;-->
        <!--            &lt;!&ndash;              ></el-image>&ndash;&gt;-->
        <!--            &lt;!&ndash;            </el-upload>&ndash;&gt;-->

        <!--            &lt;!&ndash;            <el-upload&ndash;&gt;-->
        <!--            &lt;!&ndash;              style="float: left"&ndash;&gt;-->
        <!--            &lt;!&ndash;              accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"&ndash;&gt;-->
        <!--            &lt;!&ndash;              action="/api/course/ware/document/file"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :show-file-list="false"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-progress="uploadProgress"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-success="uploadSuccess"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-error="uploadError"&ndash;&gt;-->
        <!--            &lt;!&ndash;            >&ndash;&gt;-->
        <!--            &lt;!&ndash;              <el-button&ndash;&gt;-->
        <!--            &lt;!&ndash;                type="success"&ndash;&gt;-->
        <!--            &lt;!&ndash;                size="small"&ndash;&gt;-->
        <!--            &lt;!&ndash;                class="link-left wdd-button-mini"&ndash;&gt;-->
        <!--            &lt;!&ndash;                >上传文件</el-button&ndash;&gt;-->
        <!--            &lt;!&ndash;              >&ndash;&gt;-->
        <!--            &lt;!&ndash;            </el-upload>&ndash;&gt;-->

        <!--            &lt;!&ndash;            <el-upload&ndash;&gt;-->
        <!--            &lt;!&ndash;              style="float: left; margin-left: 5px"&ndash;&gt;-->
        <!--            &lt;!&ndash;              accept=".xlsx"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :data="{ folder: 'yqyd' }"&ndash;&gt;-->
        <!--            &lt;!&ndash;              action="/api/user/v1/employee/import"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :show-file-list="false"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-progress="uploadProgress"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-success="uploadExcelSuccess"&ndash;&gt;-->
        <!--            &lt;!&ndash;              :on-error="uploadError"&ndash;&gt;-->
        <!--            &lt;!&ndash;            >&ndash;&gt;-->
        <!--            &lt;!&ndash;              <el-button type="success" class="link-left">上传</el-button>&ndash;&gt;-->
        <!--            &lt;!&ndash;            </el-upload>&ndash;&gt;-->
        <!--          </el-tab-pane>-->
        <!--        </el-tabs>-->
      </el-form-item>
      <!--      <h4>班主任：</h4>-->
      <!--      <el-form-item label="姓名：" prop="plan.train.trainingTeacher" required>-->
      <!--        <el-input v-model="form.plan.train.trainingTeacher"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item-->
      <!--        label="电话："-->
      <!--        prop="plan.train.trainingTeacherPhone"-->
      <!--        required-->
      <!--      >-->
      <!--        <el-input v-model="form.plan.train.trainingTeacherPhone"></el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item-->
      <!--        label="邮箱或微信："-->
      <!--        prop="plan.train.trainingTeacherWechat"-->
      <!--      >-->
      <!--        <el-input v-model="form.plan.train.trainingTeacherWechat"></el-input>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
      <!-- </el-tab-pane> -->
      <!-- <el-tab-pane label="培训班课程安排" name="second">
          <div v-for="(item, index) in form.course" :key="index" class="question">
            <el-form-item label="课程内容：" prop="courseContent">
              <el-input v-model="form.course[index].courseContent"></el-input>
            </el-form-item>
            <el-form-item label="课时：" prop="courseTime">
              <el-input v-model="form.course[index].courseTime"></el-input>
            </el-form-item>
            <el-form-item label="授课教师：" prop="courseTeacher">
              <el-input v-model="form.course[index].courseTeacher"></el-input>
            </el-form-item>
            <el-form-item label="职位职称：" prop="courseTeacherTitle">
              <el-input v-model="form.course[index].courseTeacherTitle"></el-input>
            </el-form-item>
            <el-form-item label="备注：" prop="remark">
              <el-input v-model="form.course[index].remark" type="textarea"></el-input>
            </el-form-item>
            <el-button type="danger" style="margin-bottom: 10px;" @click="RemoveData(index)">删除</el-button>
          </div>
          <el-button type="success" @click="add">添加</el-button>
        </el-tab-pane> -->
      <!-- <el-tab-pane label="老师签到" name="three">
          <el-upload accept=".jpg,.png" name="file" :data="{ folder: 'yqyd' }" action="/api/upload/folder/file"
            :on-progress="uploadProgress" :on-success="upload" :on-error="uploadError">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-table :data="form.teacherSign" width="1000px">
            <el-table-column prop="docUrl" label="文件" width="800px">
            </el-table-column>
            <el-table-column width="300px" label="操作" align="center">
              <template #default="{ row }">
                <el-button type="danger" @click="teacherSignDelete(row)" class="link-left wdd-button-mini"
                  size="small">删除
                </el-button>
                <el-button type="success" @click="teacherSignShow(row)" class="link-left wdd-button-mini" size="small">查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane> -->
      <!-- <el-tab-pane label="综合考评报告" name="fourth">
          <el-form-item label="基本情况：" prop="report.part1" required>
            <el-input v-model="form.report.part1" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="学业落实：" prop="report.part2" required>
            <el-input v-model="form.report.part2" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="课程的落实：" prop="report.part3" required>
            <el-input v-model="form.report.part3" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="培训成效：" prop="report.part4" required>
            <el-input v-model="form.report.part4" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="存在问题：" prop="report.part5" required>
            <el-input v-model="form.report.part5" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="建议和措施：" prop="report.part6" required>
            <el-input v-model="form.report.part6" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="培训机构负责人人员类别：" prop="report.createUserDept" required>
            <el-input v-model="form.report.createUserDept"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-tab-pane> -->
    </el-form>
    <!-- </el-tabs> -->
    <el-dialog v-model="courseWarePage.showDialog" width="90%">
      <el-form :model="courseWarePage.queryParam" ref="courseWareQueryForm" :inline="true">
        <el-form-item label="类型：">
          <el-select v-model="courseWarePage.queryParam.fileType" clearable>
            <el-option v-for="item in EnumMap.courseWare.fileType" :key="item.key" :value="item.key"
              :label="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类：">
          <tree-select v-model="courseWarePage.queryParam.courseWareArchiveIdList" :data="courseWareArchiveTree"
            :clearable="true" placeholder="培训分类" />
        </el-form-item>
        <el-form-item label="名称：">
          <el-input v-model="courseWarePage.queryParam.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="courseWareSearch">查询</el-button>
          <el-button @click="courseWareClear">重置</el-button>
          <el-button type="primary" @click="courseWareAdd">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="courseWarePage.tableData" @row-click="courseWareClick" border fit highlight-current-row
        style="width: 100%">
        <el-table-column prop="id" label="Id" width="90px" />
        <el-table-column prop="fileTypeStr" label="培训类型" width="90px" />
        <el-table-column prop="level" label="培训分类" width="120px" />
        <el-table-column prop="name" label="培训名称" />
        <el-table-column prop="fileName" label="文件名称" />
        <el-table-column prop="maxLengthStr" label="时长" width="120px" />
        <el-table-column prop="createTime" label="创建时间" width="160px" />
        <el-table-column width="80px" label="操作" align="center">
          <template #default="{ row }">
            <el-button class="wdd-button-mini" size="small" @click.stop="courseWarePreview(row.previewPath)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="courseWarePage.total > 0" :total="courseWarePage.total"
        v-model:page="courseWarePage.queryParam.pageIndex" v-model:limit="courseWarePage.queryParam.pageSize"
        @pagination="courseWareSearch" />
    </el-dialog>

    <el-dialog v-model="courseWarePage.addCourse" width="70%">
      <courseAdd />
    </el-dialog>
    <el-dialog v-model="examPaperPage.showDialog" width="90%">
      <el-form :model="examPaperPage.queryParam" ref="examPaperQueryForm" :inline="true">
        <el-form-item label="分类：">
          <tree-select v-model="examPaperPage.queryParam.examPaperArchiveIdList" :data="examPaperArchiveTree"
            :clearable="true" placeholder="试卷分类" />
        </el-form-item>
        <el-form-item label="名称：">
          <el-input v-model="examPaperPage.queryParam.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="examPaperSearch">查询</el-button>
          <el-button @click="examPaperClear">重置</el-button>
          <el-button type="primary" @click="examAdd">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="examPaperPage.tableData" @row-click="examPaperClick" border fit highlight-current-row
        style="width: 100%">
        <el-table-column prop="id" label="Id" width="90px" />
        <el-table-column prop="level" label="试卷分类" width="120px" />
        <el-table-column prop="name" label="试卷名称" />
        <el-table-column prop="score" label="总分" width="100px" />
        <el-table-column prop="questionCount" label="题目数" width="70px" />
        <el-table-column prop="suggestTimeStr" label="考试时长" width="110px" />
        <el-table-column prop="createTime" label="创建时间" width="160px" />
        <el-table-column width="80px" label="操作" align="center">
          <template #default="{ row }">
            <el-button class="wdd-button-mini" size="small" @click.stop="examPaperPreview(row.id)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="examPaperPage.total > 0" :total="examPaperPage.total"
        v-model:page="examPaperPage.queryParam.pageIndex" v-model:limit="examPaperPage.queryParam.pageSize"
        @pagination="examPaperSearch" />
    </el-dialog>
    <el-dialog v-model="examPaperPage.examAdd" width="70%">
      <examAdd />
    </el-dialog>

    <el-dialog v-model="credentialPage.showDialog" width="90%">
      <el-form :model="credentialPage.queryParam" ref="credentialQueryForm" :inline="true">
        <el-form-item label="名称：">
          <el-input v-model="credentialPage.queryParam.name" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="credentialSearch">查询</el-button>
          <el-button @click="credentialClear">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="credentialPage.tableData" @row-click="credentialClick" border fit highlight-current-row
        style="width: 100%">
        <el-table-column prop="id" label="Id" width="90px" />
        <el-table-column prop="templateImagePath" label="证书模板" width="90px">
          <template #default="{ row }">
            <el-image style="width: 50px; height: 50px" :src="row.templateImagePath" fit="fill" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="证书模板名称" />
        <el-table-column prop="company" label="发证机构" />
        <el-table-column prop="createTime" label="创建时间" width="160px" />
        <el-table-column width="80px" label="操作" align="center">
          <template #default="{ row }">
            <el-button size="small" class="wdd-button-mini" @click.stop="credentialShow(row.id)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="credentialPage.total > 0" :total="credentialPage.total"
        v-model:page="credentialPage.queryParam.pageIndex" v-model:limit="credentialPage.queryParam.pageSize"
        @pagination="credentialSearch" />
    </el-dialog>

    <el-dialog v-model="userPageDialog" width="98%">
      <el-form :model="userPage.queryParam" ref="queryForm" :inline="true">
        <el-form-item label="用户名：">
          <el-input v-model="userPage.queryParam.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <el-input v-model="userPage.queryParam.realName" clearable></el-input>
        </el-form-item>
        <el-form-item label="人员类别：">
          <tree-select v-model="userPage.queryParam.departmentIdList" :data="departmentTree" :clearable="true"
            placeholder="人员类别" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="userQueryForm">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="userPage.listLoading" ref="userMultipleTable" :data="userPage.tableData" @select="useSelect"
        @select-all="useSelectAll" border fit highlight-current-row style="width: 100%">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="id" label="Id" width="90px" />
        <el-table-column prop="userName" label="用户名" />
        <el-table-column prop="realName" label="真实姓名" />
        <el-table-column prop="departmentLevel" label="人员类别" />
        <el-table-column prop="sexStr" label="性别" width="60px;" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="createTime" label="创建时间" width="160px" />
      </el-table>
      <pagination v-show="userPage.total > 0" :total="userPage.total" v-model:page="userPage.queryParam.pageIndex"
        v-model:limit="userPage.queryParam.pageSize" @pagination="userSearch" :autoScroll="false" />
    </el-dialog>
  </div>
</template>

<script>
import { EnumMap } from '@/api/EnumMap';
import { employeePage } from '@/api/user';
import { numberConvert, disabledDate } from '@/utils';
import {
  Delete as IconDelete,
  View as IconView
} from '@element-plus/icons-vue';
import { tree as archiveTree } from '@/api/trainArchive';
import { tree as courseWareTree } from '@/api/courseWareArchive';
import { tree as examPaperTree } from '@/api/examPaperArchive';
import { tree } from '@/api/department';

import { select, edit } from '@/api/train';
import { page as courseWarePage } from '@/api/courseWare';
import { page as examPaperPage } from '@/api/trainExamPaper';
import {
  page as credentialPage,
  select as credentialSelect,
  preview as credentialPreview
} from '@/api/credential';
import useStore from '@/store';
import draggable from 'vuedraggable';
import courseAdd from '@/views/train/course-ware/edit.vue';
import examAdd from '@/views/train/exam-paper/edit.vue';
import { page as teacherPage } from '@/api/trainTeacher';
import { getDictDataInfo, getDictDataType } from '@/api/dictManagement';
import TabDataUpload from '@/components/TabDataUpload/index.vue';

const { tagsView } = useStore();

export default {
  name: 'TrainCourseEdit',
  components: {
    IconDelete,
    IconView,
    draggable,
    courseAdd,
    examAdd,
    TabDataUpload
  },
  data() {
    return {
      EnumMap: EnumMap,
      disabledDate: disabledDate,
      tabPosition: 'top',
      courseList: [],
      dialogVisible: false,
      form: {
        plan: {
          train: {
            id: null,
            trainArchiveId: null,
            name: null,
            description: null,
            coverPath: null,
            startTime: null,
            endTime: null,
            itemOrder: null,
            trainingType: null,
            trainingFangshi: null,
            // teacherList: [{ teacherId: '' }]
            trainingUnit: null,
            trainingUnitAdress: null
            // offline: null,
            // trainingUnit: null,
            // trainingUnitAdress: null,
            // name: null,
            // trainingFangshi: null,
            // trainingType: null,
            // trainingDateStart: null,
            // trainingDateEnd: null,
            // trainingAdress: null,
            // trainingTeacher: null,
            // trainingTeacherPhone: null,
            // trainingTeacherWechat: null,
            // coverPath: null,
            // description: null,
            // itemOrder: null,
            // startTime: null,
            // endTime: null
          },
          courseWareItemList: [],
          examPaperItem: {},
          credentialItem: {}
        },
        // trainUserList: [],
        // course: [],
        report: {
          part1: null,
          part2: null,
          part3: null,
          part4: null,
          part5: null,
          part6: null,
          createUserDept: null
        },
        departmentIdList: null,
        fileList: [],
        // teacherSign: [],
        teacherList: [{ teacherId: '' }]
      },
      rules: {
        'plan.train.trainingUnit': [
          { required: true, message: '请输入培训单位', trigger: 'blur' }
        ],
        'plan.train.trainingType': [
          { required: true, message: '请输入培训类型', trigger: 'blur' }
        ],
        'plan.train.trainingFangshi': [
          { required: true, message: '请输入培训方式', trigger: 'blur' }
        ],
        'plan.train.trainingTeacher': [
          { required: true, message: '请输入班主任姓名', trigger: 'blur' }
        ],
        'plan.train.trainingTeacherPhone': [
          { required: true, message: '请输入班主任电话', trigger: 'blur' }
        ],
        'plan.train.name': [
          { required: true, message: '请输入培训班名称', trigger: 'blur' }
        ],
        'report.part1': [
          { required: true, message: '请输入基本情况', trigger: 'blur' }
        ],
        'report.part2': [
          { required: true, message: '请输入学业落实', trigger: 'blur' }
        ],
        'report.part3': [
          { required: true, message: '请输入课程的落实', trigger: 'blur' }
        ],
        'report.part4': [
          { required: true, message: '请输入培训成效', trigger: 'blur' }
        ],
        'report.part5': [
          { required: true, message: '请输入存在问题', trigger: 'blur' }
        ],
        'report.part6': [
          { required: true, message: '请输入建议和措施', trigger: 'blur' }
        ],
        'report.createUserDept': [
          {
            required: true,
            message: '请输入培训机构负责人人员类别',
            trigger: 'blur'
          }
        ]
      },
      courseFrom: {
        courseContent: null,
        courseTime: null,
        courseTeacher: null,
        courseTeacherTitle: null,
        remark: null
      },
      list: {
        docUrl: null
      },
      dialogImageUrl: '',
      activeName: 'first',
      userPageDialog: false,
      userPage: {
        queryParam: {
          userName: null,
          realName: null,
          departmentIdList: [],
          excludeDepartmentIdList: [],
          status: 1,
          pageIndex: 1,
          pageSize: 10
        },
        listLoading: false,
        tableData: [],
        total: 0
      },
      courseWarePage: {
        showDialog: false,
        addCourse: false,
        queryParam: {
          name: null,
          fileType: null,
          courseWareArchiveIdList: [],
          selectIdList: [],
          pageIndex: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0
      },
      examPaperPage: {
        showDialog: false,
        examAdd: false,
        queryParam: {
          name: null,
          examPaperArchiveIdList: [],
          selectIdList: [],
          pageIndex: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0
      },
      credentialPage: {
        showDialog: false,
        queryParam: {
          name: null,
          selectIdList: [],
          pageIndex: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0
      },
      formLoading: false,
      departmentTree: [],
      trainArchiveTree: [],
      courseWareArchiveTree: [],
      examPaperArchiveTree: [],
      teacherList: [],
      train_file_type: [],
      sys_train_type:[]
    };
  },
  computed: {
    maxPassScore: function () {
      let sumScore = this.form.plan.examPaperItem.maxNumberStr;
      if (undefined !== sumScore && null !== sumScore && sumScore > 0) {
        return Number(sumScore);
      }
      return 100;
    }
  },
  created() {
    let id = this.$route.query.id;

    if (id && parseInt(id) !== 0) {
      this.formLoading = true;
      select(id)
        .then(re => {
          this.form = re.response;
          console.log(re.response, '表单数据');
          if (this.form.plan.examPaperItem.passNumberStr) {
            this.form.plan.examPaperItem.passNumberStr = numberConvert(
              this.form.plan.examPaperItem.passNumberStr
            );
          }
        })
        .finally(() => {
          this.formLoading = false;
        });
    }

    tree().then(re => {
      console.log(re);
      this.departmentTree = re.response;
      console.log('  this.departmentTree', this.departmentTree);
    });

    archiveTree().then(re => {
      this.trainArchiveTree = re.response;
    });

    courseWareTree().then(re => {
      this.courseWareArchiveTree = re.response;
    });

    examPaperTree().then(re => {
      this.examPaperArchiveTree = re.response;
    });
    getDictDataType('train_file_type').then(re => {
      this.train_file_type = re.response;
    });
    getDictDataType('sys_train_type').then(re => {
      console.log(re,'方式')
      this.sys_train_type = re.response;
    });

    this.getTeacherPage();
    // console.log(1, getDictDataInfoFun(100));
  },
  methods: {
    async getDictDataInfoFun(id) {
      let { response } = await getDictDataInfo(id);

      console.log(response);
      return response.dictLabel;
    },
    uploadProgress() {
      this.loading = this.$loading({
        lock: true,
        text: '文件上传中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      });
    },
    uploadImageSuccess(re, file) {
      this.loading.close();
      this.form.plan.train.coverPath = re.response.path;
    },
    upload(re, file) {
      this.loading.close();
      this.list.docUrl = re.response.path;
      this.form.teacherSign.push(this.list);
      console.log(this.form.teacherSign);
    },
    uploadError() {
      this.loading.close();
      this.$message.error('文件上传失败，请检查文件大小或文件格式');
    },
    addCourseWare() {
      this.courseWareSearch();
      this.courseWarePage.showDialog = true;
    },
    courseWareAdd() {
      this.courseWarePage.addCourse = true;
    },
    courseWareSearch() {
      this.courseWarePage.queryParam.selectIdList = [];
      for (const item of this.form.plan.courseWareItemList) {
        this.courseWarePage.queryParam.selectIdList.push(item.targetId);
      }
      courseWarePage(this.courseWarePage.queryParam).then(data => {
        const re = data.response;
        this.courseWarePage.tableData = re.list;
        this.courseWarePage.total = re.total;
        this.courseWarePage.queryParam.pageIndex = re.pageNum;
      });
    },
    courseWareClear() {
      this.courseWarePage.queryParam = {
        name: null,
        fileType: null,
        courseWareArchiveIdList: [],
        selectIdList: [],
        pageIndex: 1,
        pageSize: 10
      };
      this.courseWareSearch();
    },
    courseWareClick(row) {
      this.form.plan.courseWareItemList.push({
        targetType: 1,
        name: row.name,
        targetId: row.id,
        passNumber: null,
        passNumberStr: null,
        maxNumber: row.maxLength,
        maxNumberStr: row.maxLengthStr,
        previewPath: row.previewPath,
        fileType: row.fileType
      });
      this.courseWarePage.showDialog = false;
    },
    courseWareRemove(index) {
      this.form.plan.courseWareItemList.splice(index, 1);
    },
    courseWarePreview(url) {
      window.open(url, '_blank');
    },
    addExamPaper() {
      this.examPaperSearch();
      this.examPaperPage.showDialog = true;
    },
    examPaperSearch() {
      this.examPaperPage.queryParam.selectIdList = [];
      if (null != this.form.plan.examPaperItem.targetId) {
        this.examPaperPage.queryParam.selectIdList.push(
          this.form.plan.examPaperItem.targetId
        );
      }
      examPaperPage(this.examPaperPage.queryParam).then(data => {
        const re = data.response;
        this.examPaperPage.tableData = re.list;
        this.examPaperPage.total = re.total;
        this.examPaperPage.queryParam.pageIndex = re.pageNum;
      });
    },
    examPaperClear() {
      this.examPaperPage.queryParam = {
        name: null,
        examPaperArchiveIdList: [],
        selectIdList: [],
        pageIndex: 1,
        pageSize: 10
      };
      this.examPaperSearch();
    },
    examAdd() {
      this.examPaperPage.examAdd = true;
    },
    examPaperClick(row) {
      this.form.plan.examPaperItem = {
        targetType: 2,
        name: row.name,
        targetId: row.id,
        passNumber: null,
        passNumberStr: null,
        allowCount: null,
        maxNumberStr: row.score
      };
      this.examPaperPage.showDialog = false;
    },
    examPaperRemove() {
      this.form.plan.examPaperItem = {};
    },
    examPaperPreview(id) {
      window.open(`/#/train/exam/paper/show?id=${id}`, '_blank');
    },
    addCredential() {
      this.credentialSearch();
      this.credentialPage.showDialog = true;
    },
    credentialSearch() {
      this.credentialPage.queryParam.selectIdList = [];
      if (null != this.form.plan.credentialItem.targetId) {
        this.credentialPage.queryParam.selectIdList.push(
          this.form.plan.credentialItem.targetId
        );
      }
      credentialPage(this.credentialPage.queryParam).then(data => {
        const re = data.response;
        this.credentialPage.tableData = re.list;
        this.credentialPage.total = re.total;
        this.credentialPage.queryParam.pageIndex = re.pageNum;
      });
    },
    credentialClear() {
      this.credentialPage.queryParam = {
        name: null,
        pageIndex: 1,
        pageSize: 10
      };
      this.credentialSearch();
    },
    credentialClick(row) {
      this.form.plan.credentialItem = {
        targetType: 3,
        name: row.name,
        targetId: row.id,
        templateImagePath: row.templateImagePath
      };
      this.credentialPage.showDialog = false;
    },
    credentialRemove() {
      this.form.plan.credentialItem = {};
    },
    credentialShow(id) {
      credentialSelect(id).then(re => {
        credentialPreview(re.response).then(re => {
          window.open(re.response, '_blank');
        });
      });
    },
    submitForm() {
      console.log(this.form, '原始数据');
      let obj = JSON.parse(JSON.stringify(this.form));
      let arr = [];
      const tabList = this.$refs.tabUploadRef.tabList;
      tabList.forEach(function (item) {
        arr = arr.concat(item.fileList);
      });

      let list = [];
      arr.forEach(item => {
        let obj = {
          dictCode: item.dictCode,
          fileType: item.type || item.fileType,
          fileName: item.fileName || item.name,
          fileUrl: item.fileUrl
        };
        list.push(obj);
      });
      obj.fileList = list;
      if (
        obj.plan.credentialItem &&
        typeof obj.plan.credentialItem === 'object' &&
        Object.keys(obj.plan.credentialItem).length === 0
      ) {
        delete obj.plan.credentialItem;
      }

      this.formLoading = true;

      if (obj.plan.train.id) {
        obj.teacherList = [{ teacherId: obj.teacherList[0].teacherId }];
      }

      console.log(111, obj);
      // return false;

      edit(obj)
        .then(data => {
          if (data.code === 1) {
            this.$message.success(data.message);
            tagsView.delCurrentView(this).then(() => {
              this.$router.push('/train/course/list');
            });
          } else {
            this.$message.error(data.message);
          }
        })
        .finally(() => {
          this.formLoading = false;
        });
      // }
      // })
    },
    resetForm() {
      this.form = {
        plan: {
          train: {
            id: null,
            trainArchiveId: null,
            name: null,
            description: null,
            coverPath: null,
            startTime: null,
            endTime: null,
            itemOrder: null,
            trainingType: null,
            trainingFangshi: null,
            trainingUnit: null,
            trainingUnitAdress: null

            // trainingDateStart: null,
            // trainingDateEnd: null,
            // trainingAdress: null,
            // trainingTeacher: null,
            // trainingTeacherPhone: null,
            // trainingTeacherWechat: null
          },
          courseWareItemList: [],
          examPaperItem: {},
          credentialItem: {}
        },
        trainUserList: [],
        course: [],
        report: {
          part1: null,
          part2: null,
          part3: null,
          part4: null,
          part5: null,
          part6: null,
          createUserDept: null
        },
        teacherSign: []
      };
      this.$refs['form'].resetFields();
    },
    // 选择员工
    userSelectClick() {
      this.userPageDialog = true;
      this.userSearch();
      // console.log(this.userPage.showDialog)
    },
    userQueryForm() {
      this.userPage.queryParam.pageIndex = 1;
      this.userSearch();
    },
    useSelectAll(selection) {
      console.log(selection, '9999');
      if (selection.length === 0) {
        this.userPage.tableData.forEach(item => {
          this.useSelectArray(item, 3);
        });
      } else {
        selection.forEach(item => {
          this.useSelectArray(item, 2);
        });
      }
      this.$message.success('操作成功');
    },
    useSelectArray(userItem, action) {
      console.log(userItem, '22222');
      let array = this.form.trainUserList;
      console.log(this.form.trainUserList, '4234');
      let index = null;
      for (let i = 0; i < array.length; i++) {
        if (userItem.id === array[i].id) {
          index = i;
        }
      }
      if (action === 1) {
        // revert
        if (index == null) {
          this.form.trainUserList.push({
            createUser: userItem.id,
            userName: userItem.userName,
            realName: userItem.realName,
            departmentId: userItem.departmentId
          });
        } else {
          this.form.trainUserList.splice(index, 1);
        }
      } else if (action === 2) {
        // add
        if (index == null) {
          this.form.trainUserList.push({
            createUser: userItem.id,
            userName: userItem.userName,
            realName: userItem.realName,
            departmentId: userItem.departmentId
          });
        }
      } else if (action === 3) {
        // remove
        if (index != null) {
          this.form.trainUserList.splice(index, 1);
        }
      }
    },
    useSelect(selection, row) {
      console.log(selection);
      this.useSelectArray(row, 1);
      this.$message.success('操作成功');
    },
    removeUser(user) {
      this.form.trainUserList.splice(this.form.trainUserList.indexOf(user), 1);
    },
    userSearch() {
      // this.userPage.queryParam.excludeDepartmentIdList = this.form.trainingUserDept
      this.userPage.listLoading = true;
      employeePage(this.userPage.queryParam)
        .then(data => {
          console.log(data, '42343');
          const re = data.response;
          this.userPage.tableData = re.list;
          this.userPage.total = re.total;
          this.userPage.queryParam.pageIndex = re.pageNum;
          this.$nextTick(() => {
            let userSelectList = this.form.trainUserList;
            this.userPage.tableData.forEach(row => {
              for (let i = 0; i < userSelectList.length; i++) {
                if (userSelectList[i].id === row.id) {
                  this.$refs.userMultipleTable.toggleRowSelection(row, true);
                }
              }
            });
          });
        })
        .finally(() => {
          this.userPage.listLoading = false;
        });
    },
    handleClick(tab, event) { },
    beforeUpload(file) {
      const { name, size } = file;
      const index = name.lastIndexOf('.');
      // 判断文件名是否有后缀，没后缀文件错误
      if (index === -1) {
        this.$notify.error({
          title: '错误',
          message: `${name}文件错误，请重新上传！`
        });
        return false;
      }
      const fileType = name.substr(index + 1);
      // const acceptFileTypes = ['txt', 'zip', 'rar'];
      // 判断文件类型
      if (!acceptFileTypes.includes(fileType)) {
        this.$notify.error({
          title: '错误',
          message: `${name}文件类型错误，请重新上传！`
        });
        return false;
      }
      // 判断文件大小
      if (size > 10 * 1024 * 1024) {
        this.$notify.error({
          title: '错误',
          message: `${name}文件大小超过10M，请重新上传！`
        });
        return false;
      }
      // 默认true
      return true;
    },

    // 上传接口调取成功status为200
    uploadSuccess(res, file, fileList, item) {
      console.log(res);

      if (res.code === 1) {
        // 文件上传成功
        this.$notify.success({
          title: '成功',
          message: `${file.name}文件上传成功！`
        });
        this.loading.close();
      } else {
        this.uploadError();
      }
    },

    // 文件个数超过限制
    uploadExceed(files, fileList) {
      this.$notify.warning({
        title: '提示',
        message: `当前限制一次可选择 5 个文件，本次选择了 ${files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      });
    },
    add() {
      this.form.course.push({
        courseContent: null,
        courseTime: null,
        courseTeacher: null,
        courseTeacherTitle: null,
        remark: null
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      console.log(this.dialogImageUrl);
      this.dialogVisible = true;
    },
    //删除上传文件
    teacherSignDelete(row) {
      console.log(row, '文件信息');
      this.form.teacherSign.splice(this.form.teacherSign.indexOf(row.id), 1);
      console.log(this.form.teacherSign);
    },
    //查看
    teacherSignShow(row) {
      window.open(row.docUrl, '_blank');
    },
    RemoveData(index) {
      console.log(index, '当前删除的下标');
      this.form.course.splice(index, 1);
    },
    getTeacherPage() {
      let queryParam = {
        pageIndex: 1,
        pageSize: 10,
        name: null,
        examPaperArchiveIdList: []
      };
      teacherPage(queryParam).then(data => {
        const re = data.response;
        this.teacherList = re.list;
      });
    },
    getbumen() {
      tree().then(re => {
        this.departmentTree = re.response;
      });
    }
  }
};
</script>
<style>
.el-tabs__nav-scroll {
  margin-left: 120px;
}
</style>
import { list } from '@/api/role'
